<template>
  <div>
    <a-modal :open='props.open'
            :width="props.modelInfo && props.modelInfo.width ? props.modelInfo.width : '900px'"
            :title="props.modelInfo && props.modelInfo.title ? props.modelInfo.title : 'Basic Modal'"
            @ok='handleOk' okText='保存' :confirmLoading='modelConfig.confirmLoading'
            :destroyOnClose='modelConfig.destroyOnClose' @cancel='handleCancel'>
      <template #footer>
        <a-button key='back' @click='handleCancel'>取消</a-button>
        <a-button key='submit' type='primary' :loading='loading' @click='handleOk'>保存</a-button>
      </template>
      <a-form ref='formRef' name='FileInfoForm' class='ant-advanced-search-form' :model='formState' @finish='onFinish'
        @finishFailed='onFinishFailed' :rules='rulesRef' :label-col='labelCol' :wrapper-col='wrapperCol'>
        <a-row :gutter='24'>
          <a-col :span='12'>
            <a-form-item :name="labelMap['fileName'].name" :label="labelMap['fileName'].label">
              <a-input v-model:value='formState.fileName' :placeholder="'请填写' + labelMap['fileName'].label"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item :name="labelMap['fileSize'].name" :label="labelMap['fileSize'].label">
              <a-input v-model:value='formState.fileSize' :placeholder="'请填写' + labelMap['fileSize'].label"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter='24'>
          <a-col :span='12'>
            <a-form-item :name="labelMap['fileType'].name" :label="labelMap['fileType'].label">
              <a-input v-model:value='formState.fileType' :placeholder="'请填写' + labelMap['fileType'].label"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item :name="labelMap['bucketName'].name" :label="labelMap['bucketName'].label">
              <a-input v-model:value='formState.bucketName' :placeholder="'请填写' + labelMap['bucketName'].label"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter='24'>
          <a-col :span='12'>
            <a-form-item :name="labelMap['fileSystem'].name" :label="labelMap['fileSystem'].label">
              <a-input v-model:value='formState.fileSystem' :placeholder="'请填写' + labelMap['fileSystem'].label"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item :name="labelMap['url'].name" :label="labelMap['url'].label">
              <a-input v-model:value='formState.url' :placeholder="'请填写' + labelMap['url'].label"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter='24'>
          <a-col :span='12'>
            <a-form-item :name="labelMap['bucketFileName'].name" :label="labelMap['bucketFileName'].label">
              <a-input v-model:value='formState.bucketFileName' :placeholder="'请填写' + labelMap['bucketFileName'].label"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang='ts' setup>
import { FileInfoDetail } from './fileInfoDetailTs';
import {
  getFileInfoDetail,
  addOrEditFileInfo,
} from '@/api/fileInfo/fileInfo/fileInfoTs';
import { message, FormInstance } from 'ant-design-vue';
import { ModelInfo } from '../fileInfoListTs';

const labelCol = ref({ span: 5 });
const wrapperCol = ref({ span: 19 });

let loading = ref<boolean>(false);

const formRef = ref<FormInstance>();

const labelMap = ref<any>(
{
    fileName: {name: 'fileName', label: '文件名称'},
    fileSize: {name: 'fileSize', label: '文件大小'},
    fileType: {name: 'fileType', label: '文件类型'},
    bucketName: {name: 'bucketName', label: '仓库名称'},
    fileSystem: {name: 'fileSystem', label: '文件系统'},
    url: {name: 'url', label: '文件系统文件名称'},
    bucketFileName: {name: 'bucketFileName', label: '系统文件名称'},
});

const rulesRef = reactive({
  fileName: [
    {
      required: true,
      message: '文件名称不能为空！',
    },
  ],
  fileSize: [
    {
      required: true,
      message: '文件大小不能为空！',
    },
  ],
  fileType: [
    {
      required: true,
      message: '文件类型不能为空！',
    },
  ],
  bucketName: [
    {
      required: true,
      message: '仓库名称不能为空！',
    },
  ],
  fileSystem: [
    {
      required: true,
      message: '文件系统不能为空！',
    },
  ],
  url: [
    {
      required: true,
      message: '文件系统文件名称不能为空！',
    },
  ],
  bucketFileName: [
    {
      required: true,
      message: '系统文件名称不能为空！',
    },
  ],
});

const modelConfig = {
  confirmLoading: true,
  destroyOnClose: true,
};

interface Props {
  open?: boolean;
  modelInfo?: ModelInfo;
}
const props = defineProps<Props>();

let formState = ref<FileInfoDetail>({});


const emit = defineEmits(['handleOk', 'handleCancel']);

const handleOk = (): void => {
  loading.value = true;
  if (formRef.value) {
    formRef.value.validateFields().then(
      () => saveFileInfoManager()).catch(() => {
        loading.value = false;
      });
  }
};

const handleCancel = (): void => {
  emit('handleCancel', false);
};

//保存文件信息表信息
const saveFileInfoManager = (): void => {
  let method = '';
  if (formState.value.id) {
    method = 'put';
  } else {
    method = 'post';
  }
  addOrEditFileInfo(method, formState.value)
    .then((res) => {
      if (res.code == '200') {
        message.success((res && res.message) || '保存成功！');
        emit('handleOk', false);
      } else {
        message.error((res && res.message) || '保存失败！');
      }
      formState.value = {};
    })
    .catch((error: any) => {
       message.error((error?.message) || '保存失败！');
    }).finally(() => {
      loading.value = false;
    });
}

const onFinish = (values: any): void => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any): void => {
  console.log('Failed:', errorInfo);
};

const init = (): void => {
  if (props.modelInfo) {
    if (props.modelInfo.id) {
      getFileInfoDetail(props.modelInfo.id)
        .then((res) => {
          if (res.code == '200') {
            formState.value = res.data;
            modelConfig.confirmLoading = false;
          } else {
            message.error((res && res.message) || '查询失败！');
          }
        })
        .catch((error: any) => {
          let data = error?.response?.data;
          if (data) {
            message.error((data?.message) || '查询失败！');
          }
        });
    } else {
      modelConfig.confirmLoading = false;
      formState.value = {
      };
    }
  }
}

watch(
  () => props.open,
  (newVal) => {
    if (newVal) {
      init();
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

defineExpose({ handleOk, handleCancel });
</script>
<style lang='scss' scoped>
@import '@/style/index.scss';
</style>